<template>
  <view class="background">
      <view class="container" v-for="(item,index) in noticeArr" :key="index">
        <view class="top-section">
          <view class="title">{{ item.courseName }}</view>
            <button class="button" @click="view(item.id)">查看</button>
        </view>
      </view>
  </view>
</template>

<script >
import teacher from "../../api/teacher";

export default {
  data() {
    return {
      noticeArr: [{
        id: 0,
        courseName: '',
      }],

    }
  },
  onLoad() {

  },
  created() {
    this.teacherCourse()
  },
  methods: {
    //教师所授课程
    async teacherCourse() {
      try {
        const res = await teacher.teacherGetCourses()
        this.noticeArr = res.data
      } catch (e) {
        return Promise.reject(e)
      }
    },

    //查看学生成绩
    async view(id) {
      uni.navigateTo({
        url: `/pages/scores/viewGrades?id=${id}`, // 跳转的目标页面路径
        success: function () {
        },
        fail: function (err) {
        }
      });
    }
  }
}
</script>
<style >
.background {
  height: 100vh; /* 使背景占满整个视口高度 */
  width: 100%;
  background: white;
  flex-direction: column; /* 使子元素垂直排列 */
  display: flex;
  align-items: center; /* 垂直居中 */
}


.container {
  border: 1px solid #cccccc;
  border-radius: 10px;
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
  width: 90%;
  height: 40px; /* 调整高度以适应内容 */
  padding: 10px; /* 可选：添加内边距 */
  margin-top: 10px;
}

.top-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.title {
  flex: 1;
  text-align: left;
  font-weight: bold;
  font-size: 16px;
  margin-right: 10px;
}


.button {
  border: 0;
  background-color: #39dc14;
  color: black;
  width: 150rpx;
  font-size: 14px;
}
</style>